<template>
  <el-row>
     <el-col :span="12">
     <!-- 商品图片 - 轮播图 -->
       <el-carousel height="400px" motion-blur>
         <el-carousel-item v-for="(pic,index) in goods.picList" :key="index">
           <el-image style="height: 400px; width: 600px" fit="contain" :src="`${SERVER_ADDR}/goods/pic/${pic.url}`"></el-image>
         </el-carousel-item>
       </el-carousel>
     </el-col>
     <el-col :span="12">
     <!-- 商品基本信息 名称 颜色 版本 价格 -->
       <div class="info">
         <div class="name">{{goods.name}}</div>
         <div class="dscp">{{goods.dscp}}</div>
         <div class="price">售价：￥{{goods.price}}</div>
         <div class="markPrice">原价：￥{{goods.markPrice}}</div>
         <div class="color"><span>颜色 {{goods.color}}</span> </div>
         <div class="version"><span>版本 {{goods.version}}</span> </div>
         <div class="count">数量 {{goods.count}}</div>
         <div class="score">
           <el-rate
             v-model="goods.score"
             disabled
             show-score
             text-color="red"
             :colors="['red','red','red']"
             score-template="{value} 分"
             disabled-void-color="#909399"
         />
         </div>
         <div class="goodsBtn">
           <el-button type="primary" plain size="large" @click="insertCart"><el-icon><ShoppingCart/></el-icon>加入购物车</el-button>
           <!--<el-button type="success" plain size="large" @click="toCreateOrderPage"><el-icon><Money/></el-icon>直接购买</el-button>-->
           <el-button type="info" plain size="large" v-if="!collectInfo" @click="collect"><el-icon><StarFilled/></el-icon>收藏</el-button>
           <el-button type="danger" plain size="large" v-else @click="cancelCollect"><el-icon><Star/></el-icon>取消收藏</el-button>
         </div>
       </div>
     </el-col>
  </el-row>
  <el-row>
  <!-- 商品详情/商品评价 -->
    <el-tabs model-value="first" class="demo-tabs" type="border-card" >
      <el-tab-pane label="商品详情" name="first" v-html="goods.detail"></el-tab-pane>
      <el-tab-pane label="商品评价" name="second" v-html="goods.detail"></el-tab-pane>
    </el-tabs>
  </el-row>
</template>

<script setup>
import {useRoute} from "vue-router"
import goodsApi from "@/api/goodsApi.js";
import {ref} from "vue";
import {ShoppingCart} from "@element-plus/icons-vue";
import collectApi from "@/api/collectApi.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {useTokenStore} from "@/stores/token.js";
import cartApi from "@/api/cartApi.js";
import {useRouter} from "vue-router";

const router = useRouter();
const tokenStore = useTokenStore()
const route = useRoute();
//商品收藏状态
const collectInfo = ref(null);
//服务器地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR)
//需要显示的商品
const goods = ref({});

//跳转到生成订单的页面
// function toCreateOrderPage(){
//   //获取已选中商品ID
//   let goodsId = route.query.id
//   router.push({
//     path:'/user/createOrder',
//     query:{
//       goodsId
//     }
//   })
// }
//加入购物车
function insertCart(){
  cartApi.insert(goods.value.id)
      .then(resp => {
        if(resp.code == 10000){
          ElMessageBox.confirm(
              '添加成功，是否跳转到购物车?',
              '提示',
              {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'success',
              }
          )
              .then(() => {
                router.push("/user/cart")
              })
        }else {
          ElMessage.error(resp.msg);
        }
      })
}

//根据商品id查询商品详细信息
function selectById(){
  let id = route.query.id;
  goodsApi.selectById(id)
      .then(resp => {
        goods.value = resp.data;
        //判断用户是否已经登录
        if(tokenStore.tokenStr != null){
          //获取当前商品收藏情况
          getCollectInfo()
        }
      })
}

function getCollectInfo(){
  collectApi.selectByGoodsIdAndUserId(goods.value.id)
      .then(resp => {
        collectInfo.value = resp.data
      })
}

//收藏
function collect(){
  collectApi.insert(goods.value.id)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg);
          //刷新收藏状态
          getCollectInfo()
        }else {
          ElMessage.error(resp.msg);
        }
      });
}
//取消收藏
function cancelCollect(){
    collectApi.delete(collectInfo.value.id)
        .then(resp => {
          if(resp.code == 10000){
            ElMessage.success(resp.msg);
            //刷新收藏状态
            getCollectInfo()
          }else {
            ElMessage.error(resp.msg);
          }
        })
}

selectById();
</script>

<style scoped>
.el-carousel{
  margin: 15px 0px;
  border: 1px solid #AAA;
}
.info{
  margin: 30px 60px;
}
.info div{
  margin-bottom: 15px;
}
.info .name{
  font-size: 25px;
  font-weight: bold;
}
.info .dscp{
  color: #999;
}
.info .price{
  color: var(--theme-color);
  font-size: 18px;
}
.info .markPrice{
  color: #999;
  font-size: 15px;
  text-decoration: line-through;
}
.info span {
  display: inline-block;
  border: 2px solid var(--theme-color);
  line-height: 30px;
  border-radius: 5px;
  background-color: #FFF;
  padding: 0px 10px;
}
.el-icon{
  margin-right: 5px;
}
</style>